<template>
    <div class="main">
        <el-descriptions title="" size="default" :column="1">
            <el-descriptions-item label="比赛名称:">
                {{ match?.name }}
            </el-descriptions-item>
            <el-descriptions-item label="比赛时间:">
                {{ TimeYH1(match?.activitystarttime) }} - {{ TimeYH1(match?.activityendtime) }}
            </el-descriptions-item>
        </el-descriptions>
        <el-form size="default" :inline="true">
            <!-- 比赛下拉框 -->
            <el-form-item label="选择比赛" size="default">
                <el-select v-model="match" value-key="ID" clearable placeholder="请选择" style="width: 240px">
                    <el-option v-for="item in selectMatch" :key="item.ID" :label="item.name" :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="start" type="primary" size="default">
                    查询
                </el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" height="70vh">
            <template v-slot:empty>
                <el-empty image="https://cdn-hterobot.oss-cn-qingdao.aliyuncs.com/image/ojSass-empty.png" />
            </template>
            <el-table-column prop="paixu" width="80" type="index"></el-table-column>
            <el-table-column prop="ID" label="ID"></el-table-column>
            <el-table-column prop="name" label="题目名称"></el-table-column>
            <el-table-column prop="type" label="类型" width="100"></el-table-column>
            <el-table-column prop="score" label="分数" width="100"></el-table-column>
            <el-table-column prop="updatedAt" width="" label="更新时间">
                <template #default="{ row }">
                    {{ TimeYH(row.updatedAt) }}
                </template>
            </el-table-column>
            <el-table-column v-if="!isActivityEnd" label="操作" fixed="right" width="200">
                <template #default="{ row }">
                    <router-link v-slot="{ navigate }" custom :to="{ name: '修改比赛题目', query: { ID: row.ID } }">
                        <el-button @click="navigate" type="primary" size="default">修改</el-button>
                    </router-link>
                    <el-button @click="del(row.ID)" type="danger" size="default">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus';
import { computed, onMounted, ref, watch } from 'vue';
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import { asyncdelmatchquestion, asyncselectmatchquestion, asyncteamselectactivitys } from '../../../api';
import { Storekey } from "../../../interface";
import Studycodemodel from '../../../mysql_interface/studycodemodel';
import { TimeYH, TimeYH1 } from "../../../util/time";

const p = defineProps<{ matchId: number, data: Studycodemodel.Iactivity }>()
const route = useRoute()
const store = useStore(Storekey)
const getuser = computed(() => {
    return store.state.user
})
const teamId = computed(() => {
    return getuser.value?.teamid;
});

const match = ref<Studycodemodel.Iactivity>(p.data)
watch(() => match.value, e => {
    matchQuestion()
})
watch(() => p.matchId, e => {
    match.value = { ID: e }
})
const selectMatch = ref<Studycodemodel.Iactivity[]>([])

async function start() {
    // 获取比赛列表
    const { rows, count } = await asyncteamselectactivitys({ teamid: teamId.value })
    selectMatch.value = rows
    matchQuestion()
}
const tableData = ref<Studycodemodel.Imatchquestion[]>([])
async function matchQuestion() {
    if (match.value.ID) {
        const [data] = await asyncselectmatchquestion({ activityid: Number(match.value.ID) })
        tableData.value = data.matchquestion?.sort((a, b) => Number(a.paixu) - Number(b.paixu)) || []
    }
}

onMounted(async () => {
    await start()
    if (p.matchId) {
        match.value = p.data
    } else {
        match.value = selectMatch.value[0]
    }
})

async function del(ID: number) {
    ElMessageBox.confirm("是否删除该题目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(async () => {
            await asyncdelmatchquestion({ ID });
            ElMessage({
                type: "success",
                message: "删除成功!",
            });
            start();
        })
        .catch(() => {
            ElMessage({
                type: "info",
                message: "已取消删除",
            });
        });
}

// 比赛是否开始
const isActivityStart = computed(() => {
    if (match.value.activitystarttime) {
        return new Date(match.value.activitystarttime).getTime() < (new Date().getTime())
    }
    return false
})
// 是否在比赛中
const isActivityIn = computed(() => {
    if (match.value.activitystarttime && match.value.activityendtime) {
        return new Date(match.value.activitystarttime).getTime() < (new Date().getTime())
            && new Date(match.value.activityendtime).getTime() > (new Date().getTime())
    }
    return false
})
// 比赛是否结束
const isActivityEnd = computed(() => {
    if (match.value.activityendtime) {
        return new Date(match.value.activityendtime).getTime() < (new Date().getTime())
    }
    return false
})

</script>

<style>
.main {
    min-height: 100%;
    /* padding-bottom: 20px; */
}
</style>